<template>
    <div>
        <Modal v-model="showModal" title="新增金融产品" :mask-closable=false>
            <product-edit></product-edit>
            <div slot="footer">
                <Button type="primary" disabled icon="alert-circled" @click="showModal = false">确定</Button>
                <Button type="ghost" class="ml-2" icon="close-circled" @click="showModal = false">取消</Button>
            </div>
        </Modal>

        <div class="mb-4">
            <h4 class="font-weight-bold" style="display:inline-block;">金融产品</h4>
            <div class="float-right">
                <Button type="info" class="ml-2" shape="circle" icon="plus-round" @click="showModal = true">新增金融产品</Button>
            </div>
        </div>

        <div class="row">
            <div class="col-md-4" v-for="(service) in serviceList">
                <b-card no-body class="mb-4">
                    <b-card-header header-tag="h6" class="with-elements border-0 pr-0 pb-0">
                        <div class="card-header-title font-weight-bold">{{service.name}}</div>
                        <div class="card-header-elements ml-auto mr-2">
                            <Button icon="gear-b" class="ml-1" shape="circle" size="small" title="编辑风控节点" type="text" @click="goFlowNode(service)"></Button>
                        </div>
                    </b-card-header>
                    <b-card-body class="text-left py-3 small">
                        <div class="text-secondary" v-if="service.remark">
                            {{service.remark}}
                        </div>
                        <div class="text-secondary" v-else>
                            无
                        </div>
                        <div class="mt-2">风控节点：入驻/售前/售后/贷前/贷后</div>
                    </b-card-body>
                    <b-card-footer class="border-0 small pt-0">
                        <div class="float-right text-light">
                            活动客户：236个
                        </div>
                        <span class="text-danger">总授信: 46,536</span>
                    </b-card-footer>
                </b-card>

            </div>
        </div>
    </div>
</template>

<style src="@/vendor/libs/sweet-modal-vue/sweet-modal-vue.scss" lang="scss"></style>


<script>
import Vue from "vue";
import { ClientTable } from "vue-tables-2";
import { SweetModal, SweetModalTab } from "sweet-modal-vue";
import ProductEdit from "./edit";

Vue.use(ClientTable);

export default {
    name: "tables-vue-tables-2",
    metaInfo: {
        title: "Vue Tables 2 - Tables"
    },
    components: {
        SweetModal,
        SweetModalTab,
        'product-edit': ProductEdit
    },
    data: () => ({
        showModal: false,
        tableData: [],
        columns: [
            "产品名称",
            "金额",
            "签出时间",
            "截止到期时间",
            "状态",
            "操作"
        ],
        options: {
            pagination: { chunk: 5 },
            filterable: false,
            perPageValues: [],
            sortIcon: {
                is: "fa-sort",
                base: "fas",
                up: "fa-sort-up",
                down: "fa-sort-down"
            }
        },
        sizes: [
            { text: "Small", value: "sm" },
            { text: "Medium", value: null },
            { text: "Large", value: "lg" }
        ],
        defaultModalSize: null,
        topModalSize: null,
        fillInModalSize: null,
        icons: {
            beaker: '<i class="ion ion-ios-flask text-big"></i>',
            fork: '<i class="ion ion-md-git-branch text-big"></i>',
            heart: '<i class="ion ion-ios-heart text-big"></i>'
        },
        serviceList: []
    }),
    mounted() {
        let self = this;
        self.loadServices().then( (res) => {
            if(res.code === 0){
                self.serviceList = res.data.data;
            }
        });
    },
    methods: {
        loadServices(){
            let self = this;
            let url = "/app/v1/riskServices";
        
            return new Promise(function(resolve,reject){
                self.$http.get(url).then(res => {
                    if(res.code === 0){
                        resolve(res);
                    }else{
                        reject(res);
                    }
                });
            });
        },
        showSlideModal() {
            this.$refs.slideModal.show();
        },
        hideSlideModal() {
            this.$refs.slideModal.hide();
        },
        goFlowNode(service) {
            this.$router.push({
              path: '/product/controlNode/list',
              query:{
                oid: service.oid,
                name: service.name,
                remark: service.remark
              }
            });
        }
    }
};
</script>
